<template>
  <div class="app-container" style="font-family: '微软雅黑'">
    <!-- {{ $route.params.salonid }} - {{ $route.query.scode }} -->
    <div style="width: 100%; height: 50px">
      <img src="@/assets/images/diag_title.png" height="100%">
    </div>
    <div
      style="
        position: absolute;
        width: 54px;
        height: 60px;
        top: 0px;
        right: 30px;
      "
    >
      <img src="@/assets/images/diag_txs_logo.png" height="100%">
    </div>

    <pre
      style="
        margin: 0;
        width: 100%;
        height: 20px;
        background-color: #d14649;
        font-family: '微软雅黑';
        font-size: small;
        line-height: 20px;
      "
    >  S T O R E    P R O F I T    S Y S T E M</pre>

    <p style="font-size: 12px; margin-top: 10px">
      必读四句话:<br>
      1、看似千篇一律，实则无处其右;
      此表神奇之处在于，您善待它，它一定正反馈与您!<br>
      2、同修舍门店诊断子系统致敬彼得圣吉之第五项修炼之精神，秉持真实，反思，透彻的态度，保持平和心态，开始今天的诊断之旅。<br>
      3、门店诊断不同于您过往接触的任何运营类体系，本体系直击灵魂、只取七寸，对结果负责，不附带任何不良动机，旨在成为行业最优<br>
      秀的，最站在门店角度的赋能。<br>
      4、此时此刻，让我们一起深呼吸，开始真实蜕变之旅!<br>
    </p>

    <div class="salon-info">
      <div style="width: 25%;">填表日期： {{ diagObj.updateTime | parseTime }}</div>
      <div style="width: 50%;">门店名称： {{ $route.query.sname }}</div>
      <div style="width: 25%;">门店编号：{{ $route.query.scode }}</div>
    </div>
    <div class="item-img">
      <img src="@/assets/images/diag_1.png" height="100%">
    </div>
    <el-form class="sheet-content" label-width="110px">
      <el-form-item label="1 同修舍教练">
        <el-input v-model="diagObj.aCoach" />
      </el-form-item>
      <el-row :gutter="0">
        <el-col :span="8" :offset="0">
          <el-form-item label="2 参会人姓名">
            <el-input v-model="diagObj.aAttendee" />
          </el-form-item>
        </el-col>
        <el-col :span="9" :offset="0">
          <el-form-item label="角色" label-width="60px">
            <el-radio-group v-model="diagObj.aPost">
              <el-radio :label="1" style="margin-right: 10px">老板</el-radio>
              <el-radio :label="2" style="margin-right: 10px">股东</el-radio>
              <el-radio :label="3" style="margin-right: 10px">店长</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="7" :offset="0">
          <el-form-item label="电话" label-width="60px">
            <el-input v-model="diagObj.aTel" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="0">
        <el-col :span="12" :offset="0">
          <el-form-item label="3 门店经营时长：早上" label-width="180px">
            <el-input-number
              v-model="diagObj.aBeginTime"
              :min="0"
              style="width: 80%"
              :controls="false"
            />点
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="—— 晚上">
            <el-input-number
              v-model="diagObj.aEndTime"
              :min="0"
              style="width: 80%"
              :controls="false"
            />点
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="0">
        <el-col :span="12" :offset="0">
          <el-form-item label="4 门店经营年限">
            <el-input v-model="diagObj.aYear1" />
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="当前股东经验年限" label-width="160px">
            <el-input v-model="diagObj.aYear2" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="0">
        <el-col :span="8" :offset="0">
          <el-form-item label="5 门店对接人">
            <el-input v-model="diagObj.aContacts" />
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="职位">
            <el-input v-model="diagObj.aPost2" />
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="电话">
            <el-input v-model="diagObj.aTel2" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="6 门店地址">
        <el-input v-model="diagObj.aAddress" />
      </el-form-item>
      <el-form-item label="7 您主观认为门店最大劣势" label-width="190px">
        <el-input v-model="diagObj.aDisAdv" />
      </el-form-item>
      <el-form-item label="8 您主观认为门店最大优势" label-width="190px">
        <el-input v-model="diagObj.aAdv" />
      </el-form-item>
    </el-form>

    <div class="item-img">
      <img src="@/assets/images/diag_2.png" height="100%">
    </div>
    <el-form class="sheet-content" label-width="110px">
      <el-row :gutter="0">
        <el-col :span="6" :offset="0" style="text-align: center">
          <!-- <el-image src="@/assets/images/diag_2_1.png" style="width: 100%;margin-top: 10px;" /> -->
          <el-image :src="require('@/assets/images/diag_2_1.png')" style="width: 100%;margin-top: 10px;" />
        </el-col>
        <el-col :span="18" :offset="0">
          <el-row :gutter="0">
            <el-col :span="8" :offset="0">
              <el-form-item label="1 业绩提升">
                <el-input-number
                  v-model="diagObj.bPerformance"
                  style="width: 80%"
                  :min="0"
                  :controls="false"
                />%
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="2 开分店">
                <el-input-number
                  v-model="diagObj.bShop"
                  style="width: 70%"
                  :min="0"
                  :controls="false"
                />家
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="3 利润提升">
                <el-input-number
                  v-model="diagObj.bProfit"
                  style="width: 80%"
                  :min="0"
                  :controls="false"
                />%
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="4 其他(填写)">
            <el-input v-model="diagObj.bOther" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="0">
        <el-col :span="16" :offset="0">
          <el-form-item
            label="门店近三个月的业绩(由近到远)"
            label-width="210px"
          >
            <el-input v-model="diagObj.bMonth3" /> </el-form-item></el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="门店月综合成本">
            <el-input v-model="diagObj.bCost" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="item-img">
      <img src="@/assets/images/diag_3.png" height="100%">
    </div>

    <el-form class="sheet-content" label-width="110px">
      <el-form-item label="您是否请人了解过2023年" label-width="180px">
        <el-radio-group v-model="diagObj.cY2023">
          <el-radio
            :label="1"
            style="margin-right: 10px"
          >个人起伏轨迹</el-radio>
          <el-radio
            :label="2"
            style="margin-right: 10px"
          >行业发展趋势</el-radio>
          <el-radio
            :label="3"
            style="margin-right: 10px"
          >全年的发力时间点</el-radio>
          <el-radio
            :label="4"
            style="margin-right: 10px"
          >顾客心理趋势</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="您在门店启动营销活动是否择日？" label-width="230px">
        <el-radio-group v-model="diagObj.cShop">
          <el-radio :label="1" style="margin-right: 10px">是</el-radio>
          <el-radio :label="2" style="margin-right: 10px">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        label="您选择合作伙伴是否请三方咨询把过脉？"
        label-width="270px"
      >
        <el-radio-group v-model="diagObj.cPartner">
          <el-radio :label="1" style="margin-right: 10px">是</el-radio>
          <el-radio :label="2" style="margin-right: 10px">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        label="您选择合作品项是否请三方咨询把过脉？"
        label-width="270px"
      >
        <el-radio-group v-model="diagObj.cItem">
          <el-radio :label="1" style="margin-right: 10px">是</el-radio>
          <el-radio :label="2" style="margin-right: 10px">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <div class="item-img">
      <img src="@/assets/images/diag_4.png" height="100%">
    </div>

    <el-form class="sheet-content" label-width="110px">
      <h3>———————————— 股东 ————————————</h3>

      <el-form-item label="股东人数">
        <el-input-number
          v-model="diagObj.dCount"
          :min="0"
          :controls="false"
        />人
      </el-form-item>

      <el-row :gutter="0">
        <el-col :span="8" :offset="0">
          <el-form-item label="股东A">
            <el-input v-model="diagObj.dAName" />
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="股权比例">
            <el-input-number
              v-model="diagObj.dARatio"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="是否参与经营">
            <el-radio-group v-model="diagObj.dAIn">
              <el-radio :label="1" style="margin-right: 10px">是</el-radio>
              <el-radio :label="2" style="margin-right: 10px">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="0">
        <el-col :span="8" :offset="0">
          <el-form-item label="经营中角色">
            <el-input v-model="diagObj.dAPost" />
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="学历">
            <el-input v-model="diagObj.dAEdu" />
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="美业经验">
            <el-input-number
              v-model="diagObj.dAYear"
              style="width: 80%"
              :min="0"
              :controls="false"
            />年
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="0">
        <el-col :span="8" :offset="0">
          <el-form-item label="股东B">
            <el-input v-model="diagObj.dBName" />
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="股权比例">
            <el-input-number
              v-model="diagObj.dBRatio"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="是否参与经营">
            <el-radio-group v-model="diagObj.dBIn">
              <el-radio :label="1" style="margin-right: 10px">是</el-radio>
              <el-radio :label="2" style="margin-right: 10px">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="0">
        <el-col :span="8" :offset="0">
          <el-form-item label="经营中角色">
            <el-input v-model="diagObj.dBPost" />
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="学历">
            <el-input v-model="diagObj.dBEdu" />
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="美业经验">
            <el-input-number
              v-model="diagObj.dBYear"
              style="width: 80%"
              :min="0"
              :controls="false"
            />年
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="0">
        <el-col :span="8" :offset="0">
          <el-form-item label="股东C">
            <el-input v-model="diagObj.dCName" />
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="股权比例">
            <el-input-number
              v-model="diagObj.dCRatio"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="是否参与经营">
            <el-radio-group v-model="diagObj.dCIn">
              <el-radio :label="1" style="margin-right: 10px">是</el-radio>
              <el-radio :label="2" style="margin-right: 10px">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="0">
        <el-col :span="8" :offset="0">
          <el-form-item label="经营中角色">
            <el-input v-model="diagObj.dCPost" />
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="学历">
            <el-input v-model="diagObj.dCEdu" />
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="美业经验">
            <el-input-number
              v-model="diagObj.dCYear"
              style="width: 80%"
              :min="0"
              :controls="false"
            />年
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="0">
        <el-col :span="8" :offset="0">
          <el-form-item label="股东D">
            <el-input v-model="diagObj.dDName" />
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="股权比例">
            <el-input-number
              v-model="diagObj.dDRatio"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="是否参与经营">
            <el-radio-group v-model="diagObj.dDIn">
              <el-radio :label="1" style="margin-right: 10px">是</el-radio>
              <el-radio :label="2" style="margin-right: 10px">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="0">
        <el-col :span="8" :offset="0">
          <el-form-item label="经营中角色">
            <el-input v-model="diagObj.dDPost" />
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="学历">
            <el-input v-model="diagObj.dDEdu" />
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="美业经验">
            <el-input-number
              v-model="diagObj.dDYear"
              style="width: 80%"
              :min="0"
              :controls="false"
            />年
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="0" class="annex">
        <el-col :span="4" :offset="0">附件一</el-col>
        <el-col :span="20" :offset="0">
          <el-link
            v-for="(item, index) in map1"
            :key="index"
            :href="'/customreport/' + item[0] + '.pdf'"
            target="_blank"
            type="primary"
          >{{ item[1] }}</el-link>
        </el-col>
      </el-row>

      <h3>———————————— 团队 ————————————</h3>
      <el-form-item label="共">
        <el-input-number
          v-model="diagObj.eCount"
          :min="0"
          :controls="false"
        />个员工
      </el-form-item>

      <el-row :gutter="0">
        <el-col :span="12" :offset="0">
          <el-form-item label="1 店长">
            <el-input-number
              v-model="diagObj.eACount"
              style="width: 80%"
              :min="0"
              :controls="false"
            />个
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="最高学历">
            <el-input v-model="diagObj.eAEdu" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="0">
        <el-col :span="12" :offset="0">
          <el-form-item label="美业工作经验">
            <el-input-number
              v-model="diagObj.eAExp"
              style="width: 80%"
              :min="0"
              :controls="false"
            />年
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="最长在岗时间">
            <el-input-number
              v-model="diagObj.eATime"
              style="width: 80%"
              :min="0"
              :controls="false"
            />年
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="0">
        <el-col :span="12" :offset="0">
          <el-form-item label="2 美容师">
            <el-input-number
              v-model="diagObj.eBCount"
              style="width: 80%"
              :min="0"
              :controls="false"
            />个
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="最高学历">
            <el-input v-model="diagObj.eBEdu" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="0">
        <el-col :span="12" :offset="0">
          <el-form-item label="美业工作经验">
            <el-input-number
              v-model="diagObj.eBExp"
              style="width: 80%"
              :min="0"
              :controls="false"
            />年
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="最长在岗时间">
            <el-input-number
              v-model="diagObj.eBTime"
              style="width: 80%"
              :min="0"
              :controls="false"
            />年
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="0">
        <el-col :span="12" :offset="0">
          <el-form-item label="3 顾问">
            <el-input-number
              v-model="diagObj.eCCount"
              style="width: 80%"
              :min="0"
              :controls="false"
            />个
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="最高学历">
            <el-input v-model="diagObj.eCEdu" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="0">
        <el-col :span="12" :offset="0">
          <el-form-item label="美业工作经验">
            <el-input-number
              v-model="diagObj.eCExp"
              style="width: 80%"
              :min="0"
              :controls="false"
            />年
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="最长在岗时间">
            <el-input-number
              v-model="diagObj.eCTime"
              style="width: 80%"
              :min="0"
              :controls="false"
            />年
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="0">
        <el-col :span="12" :offset="0">
          <el-form-item label="4 前台">
            <el-input-number
              v-model="diagObj.eDCount"
              style="width: 80%"
              :min="0"
              :controls="false"
            />个
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="最高学历">
            <el-input v-model="diagObj.eDEdu" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="0">
        <el-col :span="12" :offset="0">
          <el-form-item label="美业工作经验">
            <el-input-number
              v-model="diagObj.eDExp"
              style="width: 80%"
              :min="0"
              :controls="false"
            />年
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="最长在岗时间">
            <el-input-number
              v-model="diagObj.eDTime"
              style="width: 80%"
              :min="0"
              :controls="false"
            />年
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="顾客管理人员">
        <el-input v-model="diagObj.eManager" />
      </el-form-item>
      <el-form-item label="团队分工">
        <el-input v-model="diagObj.eTeam" />
      </el-form-item>

      <el-row :gutter="0" class="annex">
        <el-col :span="4" :offset="0">附件二</el-col>
        <el-col :span="20" :offset="0">
          <el-link
            v-for="(item, index) in map2"
            :key="index"
            :href="'/customreport/' + item[0] + '.pdf'"
            target="_blank"
            type="primary"
          >{{ item[1] }}</el-link>
        </el-col>
      </el-row>

      <h3>———————————— 客户 ————————————</h3>
      <p
        style="
          text-align: center;
          background-color: #d14649;
          line-height: 30px;
          color: aliceblue;
        "
      >
        超A类:(年消费 ≻ 20万) A类:(5万 ≺ 年消费 ≺ 20万) B类:(1万年消费 ≺ 5万)
        C类:(年消费 ≺ 1万)
      </p>
      <h4 style="color: #e6a23c; text-align: center; font-style: italic">
        ———— 顾客年龄占比 ————
      </h4>
      <el-row :gutter="0">
        <el-col :span="8" :offset="0">
          <el-form-item label="20-25岁">
            <el-input-number
              v-model="diagObj.fAge20"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="25-30岁">
            <el-input-number
              v-model="diagObj.fAge25"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="30-35岁">
            <el-input-number
              v-model="diagObj.fAge30"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="0">
        <el-col :span="8" :offset="0">
          <el-form-item label="35-40岁">
            <el-input-number
              v-model="diagObj.fAge35"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="40-45岁">
            <el-input-number
              v-model="diagObj.fAge40"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="45岁以上">
            <el-input-number
              v-model="diagObj.fAge45"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
      </el-row>
      <h4 style="color: #e6a23c; text-align: center; font-style: italic">
        ———— 消费层次比例 ————
      </h4>
      <el-row :gutter="0">
        <el-col :span="8" :offset="0">
          <el-form-item label="超A类">
            <el-input-number
              v-model="diagObj.fTypeA0"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="A类">
            <el-input-number
              v-model="diagObj.fTypeA1"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="B类">
            <el-input-number
              v-model="diagObj.fTypeB"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="0">
        <el-col :span="8" :offset="0">
          <el-form-item label="C类">
            <el-input-number
              v-model="diagObj.fTypeC"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
        <el-col :span="16" :offset="0">
          <el-form-item label="最高消费额">
            <el-input-number
              v-model="diagObj.fTypeMoney"
              style="width: 80%"
              :min="0"
              :controls="false"
            />万元/年/客
          </el-form-item>
        </el-col>
      </el-row>

      <h4 style="color: #e6a23c; text-align: center; font-style: italic">
        ———— 顾客消费人数 ————
      </h4>
      <el-row :gutter="0">
        <el-col :span="6" :offset="0">
          <el-form-item label="超A类" label-width="60px">
            <el-input-number
              v-model="diagObj.fCustomerA0"
              style="width: 85%"
              :min="0"
              :controls="false"
            />人
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="0">
          <el-form-item label="A类" label-width="60px">
            <el-input-number
              v-model="diagObj.fCustomerA1"
              style="width: 85%"
              :min="0"
              :controls="false"
            />人
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="0">
          <el-form-item label="B类" label-width="60px">
            <el-input-number
              v-model="diagObj.fCustomerB"
              style="width: 85%"
              :min="0"
              :controls="false"
            />人
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="0">
          <el-form-item label="C类" label-width="60px">
            <el-input-number
              v-model="diagObj.fCustomerC"
              style="width: 85%"
              :min="0"
              :controls="false"
            />人
          </el-form-item>
        </el-col>
      </el-row>

      <h4 style="color: #e6a23c; text-align: center; font-style: italic">
        ———— 客户来源 ————
      </h4>

      <el-row :gutter="0">
        <el-col :span="8" :offset="0">
          <el-form-item label="原始人脉">
            <el-input-number
              v-model="diagObj.fSourceA1"
              style="width: 80%"
              :min="0"
              :controls="false"
            />人
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="数量占比">
            <el-input-number
              v-model="diagObj.fSourceA2"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="产值占比">
            <el-input-number
              v-model="diagObj.fSourceA3"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="0">
        <el-col :span="8" :offset="0">
          <el-form-item label="老带新">
            <el-input-number
              v-model="diagObj.fSourceB1"
              style="width: 80%"
              :min="0"
              :controls="false"
            />人
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="数量占比">
            <el-input-number
              v-model="diagObj.fSourceB2"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="产值占比">
            <el-input-number
              v-model="diagObj.fSourceB3"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="0">
        <el-col :span="8" :offset="0">
          <el-form-item label="线上引流">
            <el-input-number
              v-model="diagObj.fSourceC1"
              style="width: 80%"
              :min="0"
              :controls="false"
            />人
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="数量占比">
            <el-input-number
              v-model="diagObj.fSourceC2"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="产值占比">
            <el-input-number
              v-model="diagObj.fSourceC3"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="0">
        <el-col :span="8" :offset="0">
          <el-form-item label="线下引流">
            <el-input-number
              v-model="diagObj.fSourceD1"
              style="width: 80%"
              :min="0"
              :controls="false"
            />人
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="数量占比">
            <el-input-number
              v-model="diagObj.fSourceD2"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="产值占比">
            <el-input-number
              v-model="diagObj.fSourceD3"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="0">
        <el-col :span="8" :offset="0">
          <el-form-item label="其他引流">
            <el-input-number
              v-model="diagObj.fSourceE1"
              style="width: 80%"
              :min="0"
              :controls="false"
            />人
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="数量占比">
            <el-input-number
              v-model="diagObj.fSourceE2"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="产值占比">
            <el-input-number
              v-model="diagObj.fSourceE3"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
      </el-row>

      <h4 style="color: #e6a23c; text-align: center; font-style: italic">
        ———— 新客 ————
      </h4>
      <el-row :gutter="0">
        <el-col :span="14" :offset="0">
          <el-form-item label="近3个月每月新客量平均" label-width="170px">
            <el-input-number
              v-model="diagObj.fNewA"
              style="width: 80%"
              :min="0"
              :controls="false"
            />人
          </el-form-item>
        </el-col>
        <el-col :span="10" :offset="0">
          <el-form-item label="新客转化率">
            <el-input-number
              v-model="diagObj.fNewB"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
      </el-row>
      <h4 style="color: #e6a23c; text-align: center; font-style: italic">
        ———— 今年每月平均进店 ————
      </h4>
      <el-row :gutter="0">
        <el-col :span="8" :offset="0">
          <el-form-item label="约">
            <el-input-number
              v-model="diagObj.fMonthA"
              style="width: 80%"
              :min="0"
              :controls="false"
            />人
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="客单价">
            <el-input-number
              v-model="diagObj.fMonthB"
              style="width: 80%"
              :min="0"
              :controls="false"
            />元
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="月均业绩">
            <el-input-number
              v-model="diagObj.fMonthC"
              style="width: 80%"
              :min="0"
              :controls="false"
            />元
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="item-img">
      <img src="@/assets/images/diag_5.png" height="100%">
    </div>

    <el-form class="sheet-content" label-width="110px">
      <el-form-item label="门店所处区位">
        <el-radio-group v-model="diagObj.gArea">
          <el-radio :label="1">郊区</el-radio>
          <el-radio :label="2">市区</el-radio>
          <el-radio :label="3">市黄金地段</el-radio>
          <el-radio :label="4">商业区</el-radio>
          <el-radio :label="5">住宅区</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="门店位置类型">
        <el-radio-group v-model="diagObj.gType">
          <el-radio :label="1">写字楼</el-radio>
          <el-radio :label="2">临街一楼铺面</el-radio>
          <el-radio :label="3">临街楼上</el-radio>
          <el-radio :label="4">不临街</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="500M范围内同档同类店" label-width="200px">
        <el-input-number v-model="diagObj.gM500" :min="0" :controls="false" />个
      </el-form-item>
      <el-form-item label="1000M范围内同档同类店" label-width="200px">
        <el-input-number
          v-model="diagObj.gM1000"
          :min="0"
          :controls="false"
        />个
      </el-form-item>
      <el-form-item
        label="1000M范围内大美业门店(不分大小和业态)"
        label-width="300px"
      >
        <el-input-number
          v-model="diagObj.gM1001"
          :min="0"
          :controls="false"
        />个
      </el-form-item>

      <el-row :gutter="0" class="annex">
        <el-col :span="4" :offset="0">附件三</el-col>
        <el-col :span="20" :offset="0">...</el-col>
      </el-row>
      <el-row :gutter="0" class="annex">
        <el-col :span="4" :offset="0">附件四</el-col>
        <el-col :span="20" :offset="0">
          <el-link
            layz
            :href="'/#/show/kanyu/' + diagObj.sid + '?sname='+$route.query.sname+'&scode=' + $route.query.scode"
            target="_blank"
            type="primary"
          >成交道场</el-link>
        </el-col>
      </el-row>
      <br>
    </el-form>

    <div class="item-img">
      <img src="@/assets/images/diag_6.png" height="100%">
    </div>

    <el-form class="sheet-content" label-width="110px">
      <h3>———————————— 项目分类 ————————————</h3>
      <el-form-item label="门店经营第一品项" label-width="160px">
        <el-input v-model="diagObj.hItemA1" />
      </el-form-item>
      <el-row :gutter="0">
        <el-col :span="16" :offset="0">
          <el-form-item label="产品定位">
            <el-input v-model="diagObj.hItemA2" />
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="营收百分占比">
            <el-input-number
              v-model="diagObj.hItemA3"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="门店经营第二品项" label-width="160px">
        <el-input v-model="diagObj.hItemB1" />
      </el-form-item>
      <el-row :gutter="0">
        <el-col :span="16" :offset="0">
          <el-form-item label="产品定位">
            <el-input v-model="diagObj.hItemB2" />
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="营收百分占比">
            <el-input-number
              v-model="diagObj.hItemB3"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="门店经营第一分流品项" label-width="160px">
        <el-input v-model="diagObj.hItemC1" />
      </el-form-item>
      <el-row :gutter="0">
        <el-col :span="16" :offset="0">
          <el-form-item label="产品定位">
            <el-input v-model="diagObj.hItemC2" />
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="营收百分占比">
            <el-input-number
              v-model="diagObj.hItemC3"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="门店经营第二分流品项" label-width="160px">
        <el-input v-model="diagObj.hItemD1" />
      </el-form-item>
      <el-row :gutter="0">
        <el-col :span="16" :offset="0">
          <el-form-item label="产品定位">
            <el-input v-model="diagObj.hItemD2" />
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="营收百分占比">
            <el-input-number
              v-model="diagObj.hItemD3"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="0">
        <el-col :span="8" :offset="0">
          <el-form-item label="面部项目占比">
            <el-input-number
              v-model="diagObj.hItem21"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="身体项目占比">
            <el-input-number
              v-model="diagObj.hItem22"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="高科技项目占比">
            <el-input-number
              v-model="diagObj.hItem23"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="0">
        <el-col :span="12" :offset="0">
          <el-form-item label="医美项目占比">
            <el-input-number
              v-model="diagObj.hItem24"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="合作项目占比">
            <el-input-number
              v-model="diagObj.hItem25"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="0">
        <el-col :span="12" :offset="0">
          <el-form-item label="引流品项">
            <el-input v-model="diagObj.hItem31" />
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="存留品项">
            <el-input v-model="diagObj.hItem32" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="0">
        <el-col :span="12" :offset="0">
          <el-form-item label="第一分流品项">
            <el-input v-model="diagObj.hItem33" />
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="第二分流品项">
            <el-input v-model="diagObj.hItem34" />
          </el-form-item>
        </el-col>
      </el-row>

      <h3>———————————— 提成 ————————————</h3>
      <el-row :gutter="0">
        <el-col :span="14" :offset="0">
          <el-form-item
            label="消耗 (交付实施) 提成:面部提成"
            label-width="210px"
          >
            <el-input-number
              v-model="diagObj.i1"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
        <el-col :span="10" :offset="0">
          <el-form-item label="身体提成">
            <el-input-number
              v-model="diagObj.i2"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="0">
        <el-col :span="12" :offset="0">
          <el-form-item label="销售提成">
            <el-input-number
              v-model="diagObj.i3"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="二次开发提成">
            <el-input-number
              v-model="diagObj.i4"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="0">
        <el-col :span="16" :offset="0">
          <el-form-item label="合作品项">
            <el-input v-model="diagObj.i5" />
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="提成">
            <el-input-number
              v-model="diagObj.i6"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
      </el-row>

      <h3>———————————— 基础业绩 ————————————</h3>
      <el-row :gutter="0">
        <el-col :span="8" :offset="0">
          <el-form-item label="年总现金收入额" label-width="120px">
            <el-input-number
              v-model="diagObj.j1"
              style="width: 80%"
              :min="0"
              :controls="false"
            />元
          </el-form-item>
        </el-col>
        <el-col :span="5" :offset="0">
          <el-form-item label="最高" label-width="60px">
            <el-input-number
              v-model="diagObj.j2"
              style="width: 80%"
              :min="0"
              :controls="false"
            />月
          </el-form-item>
        </el-col>
        <el-col :span="3" :offset="0">
          <el-form-item label="" label-width="0px">
            <el-input-number
              v-model="diagObj.j3"
              style="width: 80%"
              :min="0"
              :controls="false"
            />元
          </el-form-item>
        </el-col>
        <el-col :span="5" :offset="0">
          <el-form-item label="最低" label-width="60px">
            <el-input-number
              v-model="diagObj.j4"
              style="width: 80%"
              :min="0"
              :controls="false"
            />月
          </el-form-item>
        </el-col>
        <el-col :span="3" :offset="0">
          <el-form-item label="" label-width="0px">
            <el-input-number
              v-model="diagObj.j5"
              style="width: 80%"
              :min="0"
              :controls="false"
            />元
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="0">
        <el-col :span="8" :offset="0">
          <el-form-item label="年总消耗(销卡)额" label-width="120px">
            <el-input-number
              v-model="diagObj.j6"
              style="width: 80%"
              :min="0"
              :controls="false"
            />元
          </el-form-item>
        </el-col>
        <el-col :span="5" :offset="0">
          <el-form-item label="最高" label-width="60px">
            <el-input-number
              v-model="diagObj.j7"
              style="width: 80%"
              :min="0"
              :controls="false"
            />月
          </el-form-item>
        </el-col>
        <el-col :span="3" :offset="0">
          <el-form-item label="" label-width="0px">
            <el-input-number
              v-model="diagObj.j8"
              style="width: 80%"
              :min="0"
              :controls="false"
            />元
          </el-form-item>
        </el-col>
        <el-col :span="5" :offset="0">
          <el-form-item label="最低" label-width="60px">
            <el-input-number
              v-model="diagObj.j9"
              style="width: 80%"
              :min="0"
              :controls="false"
            />月
          </el-form-item>
        </el-col>
        <el-col :span="3" :offset="0">
          <el-form-item label="" label-width="0px">
            <el-input-number
              v-model="diagObj.j10"
              style="width: 80%"
              :min="0"
              :controls="false"
            />元
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="0">
        <el-col :span="12" :offset="0">
          <el-form-item label="未消耗业绩">
            <el-input-number
              v-model="diagObj.j11"
              style="width: 80%"
              :min="0"
              :controls="false"
            />元
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="人数">
            <el-input-number
              v-model="diagObj.j12"
              style="width: 80%"
              :min="0"
              :controls="false"
            />人
          </el-form-item>
        </el-col>
      </el-row>

      <h3>———————————— 增量业绩 ————————————</h3>
      <h4 style="color: #e6a23c; text-align: center; font-style: italic">
        ———— 合作成功 ————
      </h4>
      <p>按收益从大到小排:</p>
      <el-row :gutter="0">
        <el-col :span="7" :offset="0">
          <el-form-item label="项目" label-width="60px">
            <el-input v-model="diagObj.kA1" />
          </el-form-item>
        </el-col>
        <el-col :span="5" :offset="0">
          <el-form-item label="收益" label-width="60px">
            <el-input-number
              v-model="diagObj.kA2"
              style="width: 80%"
              :min="0"
              :controls="false"
            />元
          </el-form-item>
        </el-col>
        <el-col :span="7" :offset="0">
          <el-form-item label="> 项目" label-width="60px">
            <el-input v-model="diagObj.kA3" />
          </el-form-item>
        </el-col>
        <el-col :span="5" :offset="0">
          <el-form-item label="收益" label-width="60px">
            <el-input-number
              v-model="diagObj.kA4"
              style="width: 80%"
              :min="0"
              :controls="false"
            />元
          </el-form-item>
        </el-col>
      </el-row>

      <h4 style="color: #e6a23c; text-align: center; font-style: italic">
        ———— 合作失败 ————
      </h4>
      <p>按伤客或亏损从大到小排:</p>
      <el-row :gutter="0">
        <el-col :span="7" :offset="0">
          <el-form-item label="项目" label-width="60px">
            <el-input v-model="diagObj.kB1" />
          </el-form-item>
        </el-col>
        <el-col :span="5" :offset="0">
          <el-form-item label="收益" label-width="60px">
            <el-input-number
              v-model="diagObj.kB2"
              style="width: 80%"
              :min="0"
              :controls="false"
            />元
          </el-form-item>
        </el-col>
        <el-col :span="7" :offset="0">
          <el-form-item label="> 项目" label-width="60px">
            <el-input v-model="diagObj.kB3" />
          </el-form-item>
        </el-col>
        <el-col :span="5" :offset="0">
          <el-form-item label="收益" label-width="60px">
            <el-input-number
              v-model="diagObj.kB4"
              style="width: 80%"
              :min="0"
              :controls="false"
            />元
          </el-form-item>
        </el-col>
      </el-row>
      <h4 style="color: #e6a23c; text-align: center; font-style: italic">
        ————————
      </h4>
      <el-row :gutter="0">
        <el-col :span="12" :offset="0">
          <el-form-item label="往年增量业务总业绩" label-width="160px">
            <el-input-number
              v-model="diagObj.kC1"
              style="width: 80%"
              :min="0"
              :controls="false"
            />元
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="往年增量业绩平均占比" label-width="160px">
            <el-input-number
              v-model="diagObj.kC2"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="0">
        <el-col :span="12" :offset="0">
          <el-form-item label="今年截止日前" label-width="160px">
            <el-input-number
              v-model="diagObj.kC3"
              style="width: 80%"
              :min="0"
              :controls="false"
            />元
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="今年增量业绩平均占比" label-width="160px">
            <el-input-number
              v-model="diagObj.kC4"
              style="width: 80%"
              :min="0"
              :controls="false"
            />%
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="三方合作最看重什么" label-width="160px">
        <el-input v-model="diagObj.kC5" />
      </el-form-item>

      <h3>———————————— 年度活动次数 ————————————</h3>

      <el-row :gutter="0">
        <el-col :span="12" :offset="0">
          <el-form-item label="年平均活动次数" label-width="160px">
            <el-input-number
              v-model="diagObj.l1"
              style="width: 80%"
              :min="0"
              :controls="false"
            />次
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="今近3个月活动次数" label-width="160px">
            <el-input-number
              v-model="diagObj.l2"
              style="width: 80%"
              :min="0"
              :controls="false"
            />次
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="0">
        <el-col :span="8" :offset="0">
          <el-form-item label="近1个月活动次数" label-width="160px">
            <el-input-number
              v-model="diagObj.l3"
              style="width: 80%"
              :min="0"
              :controls="false"
            />次
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="品类" label-width="60px">
            <el-input v-model="diagObj.l4" />
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="业绩" label-width="60px">
            <el-input-number
              v-model="diagObj.l5"
              style="width: 80%"
              :min="0"
              :controls="false"
            />元
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getDiag, getClerks } from '@/api/txs'
import dayjs from 'dayjs'

export default {
  filters: {
    parseTime (time) {
      return dayjs(time).format('YYYY-MM-DD')
    }
  },
  data () {
    return {
      diagObj: {},
      clerks: [],
      map1: undefined,
      map2: undefined
    }
  },
  created () {
    this.fetchData()
    // watch 路由的参数，以便再次获取数据
    // this.$watch(
    //   () => this.$route.params,
    //   () => {
    //     this.fetchData()
    //   },
    //   // 组件创建完后获取数据，
    //   // 此时 data 已经被 observed 了
    //   { immediate: true }
    // )
  },
  methods: {
    fetchData () {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      getDiag(this.$route.params.salonid)
        .then(res => {
          this.diagObj = res.data.data
          loading.close()
          if (!this.diagObj || !this.diagObj.sid) {
            this.$notify({
              title: '失败',
              message: '该门店还未诊断过，请先输入诊断信息',
              type: 'error',
              duration: 0
            })
          }
        })
        .catch(() => {
          this.$alert('获取信息故障，请联系管理员！', '服务器错误', {
            type: 'error',
            confirmButtonText: '确定'
          })
        })
      getClerks(this.$route.params.salonid)
        .then(res => {
          this.clerks = res.data.data
          this.map1 = new Map(Object.entries(this.clerks[0]))
          this.map2 = new Map(Object.entries(this.clerks[1]))
        })
    }
  }
}
</script>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

h3 {
  color: #d14649;
  text-align: center;
}

.salon-info {
  display: flex;
  div {
    padding: 0 10px;
    font-size: 12px;
    line-height: 30px;
    margin-left: -1px;
    height: 33px;
    width: 33%;
    border: 1px solid #2d3a4b;
    margin-bottom: 20px;
  }
}

.item-img {
  height: 30px;
  margin-bottom: 10px;
}
.sheet-content {
  // margin-right: 30px;
  background-color: #f2f2f2;
  padding: 20px 10px 1px;
  margin-bottom: 20px;
}
.annex {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  ::v-deep .el-col-4 {
    padding: 10px;
    color: #d14649;
    background-color: #fff;
  }
  ::v-deep .el-col-20 {
    padding: 10px;
    color: #409eff;
    background-color: #fff;
  }
  .el-link {
    margin-right: 30px;
    font-size:medium;
  }
}
</style>
